<template>
  <div class="result">
    <!-- 货道设置 弹窗 -->
    <el-dialog title="货道设置" :visible.sync="outerVisible" width="940px" height="634px" @close="outerClose">
      <!-- 内层弹框 -->
      <el-dialog title="智能排货" class="auto" :visible.sync="autoVisible" width="858px" @close="autoClose" append-to-body>
        <div class="top10_wrapper">
          <div style="margin-bottom:16px">该区域属于{{ business }}商圈适合销售一下商品：</div>
          <el-row style="margin-left: -10px;margin-right: -10px;">
            <el-col :span="4.8" v-for="item in top10" :key="item.skuId">
              <div class="item">
                <div class="sku">
                  <img :src="item.image" alt="">
                  <div class="name">{{ item.skuName }}</div>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
        <!-- 底部  -->
        <div slot="footer" class="dialog-footer">
          <el-row type="flex" justify="center">
            <el-button type="primary" class="goods-confirm" style="border:none;margin-bottom:20px" @click="getSuggest">采纳建议</el-button>
          </el-row>
        </div>
      </el-dialog>

      <div class="goods-container">
        <div class="title">
          <span style="margin-left:43px">货道行数：{{ detailForm.vmRow }}</span>
          <span style="margin-left:55px">货道列数：{{ detailForm.vmCol }}</span>
          <span style="margin-left:54px;flex:1">货道容量（个）：{{ detailForm.channelMaxCapacity }}</span>
          <el-button @click="autoClassify">智能排货</el-button>
        </div>
        <el-scrollbar>
          <el-row type="flex" :class="{ translat: translateActive, translat_left: !translateActive }" v-for="(item, index) in rowForm" :key="index" ref="row">
            <el-col :span="12" v-for="(item1, index1) in item" :key="item1.channelId">
              <div class="item">
                <div class="code">{{ item1.channelCode || 1+'-'+(index1 + 1) }}</div>
                <div class="middle">
                  <img :src="item1.sku ? Object.values(item1.sku)[4] : item1.image || ''" alt="">
                  <div class="name">{{ item1.sku ? Object.values(item1.sku)[9] : item1.skuName || '暂无商品'}}</div>
                </div>
                <div class="footer">
                  <el-button style="color: #5f84ff;">添加</el-button>
                  <el-button style="color: #ff5a5a;">删除</el-button>
                </div>
              </div>
            </el-col>
          </el-row>

        </el-scrollbar>

        <i class="el-icon-arrow-left left" ref="left" :class="{isCheck: isCheck_left}" @click="left"></i>
        <i class="el-icon-arrow-right right" ref="right" :class="{isCheck: isCheck_right}" @click="right"></i>

      </div>
      <!-- 底部  -->
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" class="goods-confirm" @click="outerVisible = false">确认</el-button>
      </div>
    </el-dialog>

    <!-- 修改弹窗 -->
    <el-dialog
      class="update"
      width="630px"
      height="606px"
      title="修改设备"
      :visible.sync="updateVisible"
      :before-close="updateClose"
    >
      <el-form ref="updateForm" label-width="140px" :model="updateForm">
        <el-form-item label="机器编号 :  ">
          <span>{{ this.row.innerCode }}</span>
        </el-form-item>
        <el-form-item label="供货时间 :  ">
          <span>{{ this.row.lastSupplyTime }}</span>
        </el-form-item>
        <el-form-item label="设备类型 :  ">
          <span>{{ this.type1.name }}</span>
        </el-form-item>
        <el-form-item label="设备容量 :  ">
          <span>{{ this.type1.channelMaxCapacity }}</span>
        </el-form-item>
        <el-form-item label="设备点位 :  ">
          <el-select @change="changeNode" v-model="nodeName" name="nodeId" style="width: 80%" placeholder="请选择">
            <el-option v-for="item in nodeUpdate" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="合作商 :  ">
          <span>{{ this.row.ownerName }}</span>
        </el-form-item>
        <el-form-item label="所属区域 :  ">
          <span>{{ this.region.name }}</span>
        </el-form-item>
        <el-form-item label="设备地址 :  ">
          <span>{{ this.node1.name }}</span>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="updateClose">取消</el-button>
        <el-button type="primary" @click="updateNode"
          >确认</el-button
        >
      </div>
    </el-dialog>

    <!-- 单行策略操作弹窗 -->
    <el-dialog
      width="630px"
      height="214px"
      title="策略管理"
      :visible.sync="singleGroupVisible"
      @close="singleGroupVisible = false"
    >
      <el-form label-width="60px" :model="singleForm">
        <el-row>
          <el-col :span="12" style="height:36px">
            <el-form-item>
              机器编号： {{ singleForm.innerCode }}
            </el-form-item>
          </el-col>
          <el-col :span="12" style="height:36px">
            <el-form-item>
              策略名称： {{ singleForm.policyName }}
            </el-form-item>
          </el-col>
          <el-col :span="12" style="height:36px">
            <el-form-item>
              策略方案： {{ singleForm.discount }}%
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-row type="flex" justify="center" align="middle">
          <el-button @click="singleGroupClose">取消策略</el-button>
        </el-row>
      </div>
    </el-dialog>

    <!-- 批量操作弹窗 -->
    <el-dialog
      width="630px"
      height="214px"
      title="批量策略管理"
      :visible.sync="groupVisible"
      :before-close="groupClose"
    >
      <el-form ref="groupForm" label-width="140px" :model="groupForm">
        <el-form-item label="选择策略:  " prop="policy">
          <el-select v-model="groupForm.policyId" style="width: 80%" placeholder="请选择">
            <el-option v-for="item in group" :key="item.policyId" :label="item.policyName" :value="item.policyId"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="groupClose">取消</el-button>
        <el-button type="primary" @click="selectPolicy"
          >确认</el-button
        >
      </div>
    </el-dialog>

    <!-- 新建弹窗 -->
    <el-dialog
      width="630px"
      height="326px"
      title="新增设备"
      :visible.sync="createVisible"
      @close="btnCancel"
    >
      <el-form ref="createForm" label-width="140px" :model="createForm" :rules="formRules">
        <el-form-item label="设备编号: " size="small">
          <span>系统自动生成</span>
        </el-form-item>
        <el-form-item label="选择型号: " prop="vmType">
          <el-select v-model="createForm.vmType" style="width: 80%" placeholder="请选择">
            <el-option v-for="item in type" :key="item.typeId" :label="item.name" :value="item.typeId"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选择点位: " prop="nodeId">
          <el-select v-model="createForm.nodeId" style="width: 80%" placeholder="请选择">
            <el-option v-for="item in node" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="btnCancel">取消</el-button>
        <el-button type="primary" @click="add"
          >确认</el-button
        >
      </div>
    </el-dialog>

    <!-- 按钮 -->
    <el-row type="flex" class="btn">
      <el-button type="primary" class="new" @click="addDevice">
        <i class="el-icon-circle-plus-outline"></i>
        新建
      </el-button>
      <el-button type="primary" class="operate" plain @click="operateGroup">批量操作</el-button>
    </el-row>
    <!-- 表格 -->
    <el-table
       v-loading="loading"
      :header-cell-style="{
        background: '#f3f6fb',
        height: '42px',
        color: '#666',
        fontWeight: '400',
        border: 'none',
      }"
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      :row-style="{ height: '44px' }"
      :cell-style="{ padding: 0, border: 'none' }"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <!-- type="index" -->
      <el-table-column prop="index" label="序号" width="80">
        <!-- <template #default="{ $index }">
          {{ $index + 1 }}
        </template> -->
      </el-table-column>
      <el-table-column prop="innerCode" label="设备编号" width="204">
      </el-table-column>
      <el-table-column prop="type.name" label="设备型号" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="node.name" label="详细地址" show-overflow-tooltip>
      </el-table-column>
      <el-table-column
        prop="node.ownerName"
        label="合作商"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column prop="vmStatus" label="设备状态" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="" label="操作" width="150">
        <template #default="{ row }">
          <div class="">
            <el-button type="text" @click="openGoodsGroup(row)">货道</el-button>
            <el-button type="text" @click="operateGroupSingle(row)">策略</el-button>
            <el-button type="text" @click="update(row, row.node, row.region, row.type)">修改</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="footer" ref="footer" v-if="paginationVisible && totalCount > pageSize">
      <span
        >共{{ this.totalCount }}条数据 第 {{ this.current }}/{{
          this.totalPage
        }}
        页</span
      >
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page="current"
        :page-size="pageSize"
        layout="slot"
        :total="+totalCount"
        ref="page"
      >
      <div class="btn-group">
        <el-button type="primary" ref="prev" :disabled="current === 1" :class="{ disable: current === 1 }" @click="prev">上一页</el-button>
        <el-button type="primary" ref="next" :disabled="current === +totalPage" :class="{ disable: current === +totalPage }" @click="next">下一页</el-button>
      </div>
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { addDevice, applyPolicy, businessList, cancelPolicy, getTop10, goodsDetail, policyList, queryPolicy, searchDeviceType, searchNode, searchTable, typeDetail, updateNode } from '@/api/devicemange'
export default {
  props: {
    device: {
      type: Array,
      default: () => []
    }
  },
  watch: {
    // 监听从搜索栏 => 父组件 => 这个组件的 device
    // 如果发生变化，就修改 tableData 的数据
    device (val) {
      if (val.length === 0) {
        this.tableData = []
      } else if (val.length === 1) {
        this.tableData = val
        // 修改索引
        val[0].index = 1
        this.paginationVisible = false
      } else {
        // code 为空的话 获取全部数据
        this.getTableData()
        this.paginationVisible = true
      }
    }
  },
  created () {
    // 调用获取表格数据方法
    this.getTableData()
  },
  computed: {
    vmStatus () {
      if (this.tableData.vmStatus === 0) {
        return '未投放'
      } else if (this.tableData.vmStatus === 1) {
        return '运营'
      } else {
        return '撤机'
      }
    }
  },
  data () {
    return {
      // 智能排货
      top10: [],
      business: '',
      businessId: '',
      autoVisible: false,
      // 货道变量
      translateActive: false,
      isCheck_left: false,
      isCheck_right: true,
      goods: [],
      rowForm: [],
      detailForm: {
        vmRow: '',
        vmCol: '',
        channelMaxCapacity: ''
      },
      outerVisible: false,
      // 单选策略
      singleForm: {
        innerCode: '',
        policyName: '',
        discount: ''
      },
      singleGroupVisible: false,
      nodeName: '',
      paginationVisible: true,
      nodeUpdate: [],
      type1: {},
      region: {},
      node1: {},
      row: {},
      updateForm: {
        nodeId: '',
        id: ''
      },
      updateVisible: false, // 修改弹窗
      loading: false, // 区域加载
      group: [], // 批量修改策略
      groupForm: {
        policyId: ''
      },
      groupVisible: false,
      disable1: true,
      disable2: false,
      status: 0,
      // pageIndex: 1,
      pageSize: 10,
      current: 1, // 当前页
      totalCount: '', // 总条数
      totalPage: '', // 总页数
      tableData: [], // table数据
      multipleSelection: [],
      createVisible: false, // 新增设备显示与隐藏
      type: [], // 新增时的型号
      node: [], // 新增时的点位
      createForm: {
        // 新增表单
        vmType: '',
        nodeId: ''
      },
      formRules: {
        vmType: [{ required: true, message: '请输入', trigger: 'blur' }],
        nodeId: [{ required: true, message: '请输入', trigger: 'blur' }]
      }
    }
  },

  methods: {
    // 采纳建议
    getSuggest () {
      if (this.top10.length) {
        this.$set(this.rowForm, 0, this.top10) // 改变数组并更新页面
        this.autoVisible = false
      } else {
        this.autoVisible = false
      }
    },
    // 智能排货
    async autoClassify () {
      // 学校 写字楼
      this.business = await businessList(this.businessId)
      this.top10 = await getTop10(this.businessId)
      console.log(this.top10)
      console.log(this.rowForm)

      this.autoVisible = true
    },
    autoClose () {
      this.autoVisible = false
    },
    // 货道方法
    left (e) {
      this.isCheck_left = false
      this.isCheck_right = true
      this.$refs.left.style.disabled = false
      this.$refs.right.style.disabled = true
      // console.log(this.$refs.row)
      this.translateActive = false
    },
    right () {
      this.isCheck_right = false
      this.isCheck_left = true
      this.$refs.left.style.disabled = true
      this.$refs.right.style.disabled = false
      this.translateActive = true
    },
    // 打开最外层
    async openGoodsGroup (row) {
      this.businessId = row.businessId
      // 显示 货道弹窗
      this.outerVisible = true
      // console.log(row)
      // 获取头部信息 行数，列数，容量
      this.detailForm = await typeDetail(row.type.typeId)
      // console.log(this.detailForm)
      // 获取货道 商品数据
      this.goods = await goodsDetail(row.innerCode)
      // console.log(this.goods)
      // console.log(this.detailForm.vmRow) // 遍历的次数
      // console.log(this.detailForm.vmCol) // 计算每行取出的个数
      // 行数就是 rowForm 的长度
      for (let i = 0; i < this.detailForm.vmRow; i++) {
        // i=0 时，取出 1-10，i=1 时，取出 10-19
        this.rowForm.push(this.goods.filter((item, index) => index >= (i * this.detailForm.vmCol + 0) && index <= (9 + i * this.detailForm.vmCol)))
      }
    },
    // 最外层关闭
    outerClose () {
      this.outerVisible = false
      this.rowForm = []
    },

    // 下拉框选值发生变化
    changeNode (val) {
      // console.log(val)
      this.updateForm.nodeId = val
    },
    // 修改点位确定
    async updateNode () {
      try {
        await updateNode(this.updateForm)
        this.updateVisible = false
        this.getTableData() // 重新渲染数据
      } catch (err) {
        console.log(err)
      }
    },
    updateClose () {
      this.updateVisible = false
    },
    // 点击修改
    async update (row, node1, region, type) {
      this.nodeName = row.node.name
      this.updateForm.nodeId = row.node.id
      this.updateForm.id = row.id
      this.updateVisible = true
      this.row = row
      this.node1 = node1
      this.region = region
      this.type1 = type
      const res = await searchNode()
      console.log(res)
      this.nodeUpdate = res.currentPageRecords
      console.log(row)
    },
    // 应用策略 批量
    async selectPolicy () {
      if (this.multipleSelection.length) {
        // 说明是 批量修改策略
        await applyPolicy({
          policyId: this.groupForm.policyId,
          innerCodeList: this.multipleSelection
        })
      } else {
        // 说明是 单个修改策略
        await applyPolicy({
          policyId: this.groupForm.policyId,
          innerCodeList: [this.singleForm.innerCode]
        })
      }
      this.getTableData()
      this.groupVisible = false
    },
    // 关闭批量
    groupClose () {
      this.$refs.groupForm.resetFields()
      this.groupVisible = false
    },
    // 取消策略
    async singleGroupClose () {
      await cancelPolicy(this.singleForm)
      this.singleGroupVisible = false
    },
    // 每行单点策略
    async operateGroupSingle (row) {
      const res = await queryPolicy(row.innerCode)
      if (res) {
        // 说明已经应用了策略
        console.log(res)
        this.singleForm = res // 赋值给表单
        this.singleGroupVisible = true
      } else {
        // 没有应用策略
        const res = await policyList()
        console.log(res)
        this.group = res
        this.groupVisible = true // 打开批量策略 弹窗
      }
    },
    // 批量操作
    async operateGroup (row) {
      console.log(row)
      if (this.multipleSelection.length) {
        this.groupVisible = true
        // 获取选择策略下拉列表数据
        const res = await policyList()
        // console.log(res)
        // console.log(this.multipleSelection)
        this.group = res
      } else {
        this.$message.warning('请勾选售货机')
      }
    },
    // 新建确定
    async add () {
      await this.$refs.createForm.validate()
      const res = await addDevice(this.createForm) // 返回 true 或 false
      if (res) {
        // 重新渲染表格
        this.getTableData()
        // 重置表格
        this.$refs.createForm.resetFields()
        // 关闭弹窗
        this.createVisible = false
      }
    },
    // 新建取消
    btnCancel () {
      this.$refs.createForm.resetFields()
      this.createVisible = false
    },
    // 新建
    async addDevice () {
      const { currentPageRecords } = await searchDeviceType()
      this.type = currentPageRecords
      const res = await searchNode()
      this.node = res.currentPageRecords
      this.createVisible = true
    },
    // 新建表单下拉框 型号选择
    handleTypeChange () {},
    // 新建设备
    // addDevice () {},
    // 封装获取表格数据方法
    async getTableData (val) {
      this.loading = true
      const res = await searchTable({
        pageIndex: this.current,
        pageSize: this.pageSize
      })
      // 将设备状态从 0 1 2 转换成 => 未投放 运营 撤机
      res.currentPageRecords.forEach((item, index) => {
        if (item.vmStatus === 0) {
          item.vmStatus = '未投放'
        } else if (item.vmStatus === 1) {
          item.vmStatus = '运营'
        } else {
          item.vmStatus = '撤机'
        }
        // 设置顺序序号
        item.index = index + 1 + res.pageSize * (res.pageIndex - 1)
      })
      // data的数据
      this.tableData = res.currentPageRecords
      // 总条数
      this.totalCount = res.totalCount
      // 总页数
      this.totalPage = res.totalPage
      // multipleSelection中有值 再重置多选框
      this.multipleSelection.length && this.$refs.multipleTable.clearSelection()
      this.loading = false
    },
    // 全选
    handleSelectionChange (val) {
      // console.log(val)
      this.multipleSelection = []
      val.forEach(item => {
        this.multipleSelection.push(item.innerCode)
      })
      // console.log(this.multipleSelection)
    },
    // 下一页
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
      // 处理当前页变化
      this.current = val
      // 重新获取数据
      this.getTableData()
    },
    // 按钮下一页
    next () {
      this.$refs.page.next()
    },
    // 按钮上一页
    prev () {
      this.$refs.page.prev()
    }
  }
}
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.auto::v-deep {
  .el-dialog {
    border-radius: 10px;
    .el-dialog__header {
      .el-dialog__title {
        font-size: 16px;
      }
    }
    .el-dialog__body {
      padding: 20px 20px 10px;
      color: #666;
      .top10_wrapper {
        margin: 0 34px;
        .el-row {
          .el-col {
            padding-left: 10px;
            padding-right: 10px;
            .item {
              .sku {
                width: 134px;
                height: 134px;
                padding-top: 16px;
                background-color: #f6f7fb;
                box-shadow: 0 2px 4px 0 rgb(0 0 0 / 6%);
                border-radius: 4px;
                text-align: center;
                margin-bottom: 20px;
                img {
                  display: inline-block;
                  width: 83px;
                  height: 84px;
                  margin-bottom: 5px;
                }
                .title {
                  width: 102px;
                  margin: 0 auto;
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                }
              }
            }
          }
        }
      }
    }
  }
}
i {
  color: #d8dde3;
}
.isCheck {
  color: #000;
  cursor: pointer;
}
i.left {
  position: absolute;
  top: 50%;
  left: 5px;
  font-size: 50px;
}
i.right {
  position: absolute;
  top: 50%;
  right: 5px;
  font-size: 50px;
}
// 货道样式
.goods-container {
  width: 847px;
  margin: 0 26px;
  .title {
    display:flex;align-items:center;width:100%;height:56px;margin-bottom:16px;background: #f3f6fb;
    .el-button {
      color:#fff;display:flex;justify-content:center;align-items:center;background-color:#5f84ff;border:none;min-width:80px;height:36px;margin-right:22px;
    }
  }
  .el-scrollbar::v-deep {
    width: 814px;
    height: 384px;
    margin: 0 auto;
    /* element滚动条组件 隐藏水平滚动条 */
    .el-scrollbar__wrap {
      overflow-x: hidden;
    }
    .el-scrollbar__bar.is-horizontal {
      display: none;
    }
    .el-row.translat {
      transition: all .6s;
      transform: translateX(-103%);
    }
    .el-row.translat_left {
      transition: all .6s;
      transform: translateX(0);
    }
    .el-col {
      width:166px;height:180px;padding-left:8px;padding-right: 8px;margin-bottom: 20px;
      .item {
        position:relative;width:150px;height:180px;background-color:#fff;box-shadow: 0 2px 4px 0 rgb(0 0 0 / 6%);border-radius: 4px;text-align: center;
        .code {
          position: absolute;top: 10px;left: 0;width: 43px;height: 23px;line-height: 23px;background: #829bed;border-radius: 0 10px 10px 0;font-size: 12px;color: #fff;
        }
        .middle {
          height: 135px;
          padding-top: 16px;
          background-color: #f6f7fb;
          border-radius: 4px;
          img {
            display: inline-block;
            width: 84px;
            height: 78px;
            margin-bottom: 10px;
            object-fit: contain;
          }
          .name {
            padding: 0 16px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
        }
        .footer {
          padding-top: 3px;
          padding-bottom: 0;
          display: flex;
          justify-content: center;
          width: 150px;
          height: 40px;
          .el-button {
            border: none;
            width: 30px;
            height: 40px;
            text-align: center;
            background: transparent;
            padding-left: 0;
            padding-right: 0;
          }
        }
      }
    }
  }
}

.el-button{
  &.goods-confirm {
    color: #fff !important;
    background: linear-gradient(135deg, #ff9743, #ff5e20) !important;
  }
}
.result {
  padding: 20px 15px 19px 17px;
  .el-dialog__wrapper.update::v-deep {
    .el-dialog__body {
      .el-form-item {
        height: 36px;
        margin-bottom: 20px;
      }
    }
  }
  // 按钮区域
  .btn {
    margin-bottom: 20px;
    .el-button {
      width: 80px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: none;
      &.new {
        background: linear-gradient(135deg, #ff9743, #ff5e20) !important;
      }
      &.operate {
        background-color: #fbf4f0 !important;
        color: #655b56 !important;
      }
    }
  }
  .footer {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 32px 16px;
    span {
      font-size: 16px !important;
      color: #dbdfe5 !important;
    }
    .btn-group {
      display: flex;
      .el-button {
        width: 70px;
        height: 32px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 16px;
        background-color: #d5ddf8;
        color: #606266;
        border: none;
        border-radius: 2px;
        &.disable {
          background: #edf0f9;
          color: #d8dde3;
        }
      }
    }
  }
  .el-dialog__wrapper::v-deep {
    .el-dialog {
      border-radius: 10px;
      // height: 326px;
      .el-dialog__header {
        .el-dialog__title {
          font-size: 16px;
          color: #333;
        }
      }
      .el-dialog__body {
        padding: 20px 20px 10px;
        .el-form-item {
          .el-form-item__content {
            el-cascader {
              width: 396px;
              height: 36px;
            }
          }
        }
      }
      .el-dialog__footer {
        text-align: center;
        padding: 0 20px 35px;
        .dialog-footer {
          display: flex;
          justify-content: center;
          .el-button {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 80px;
            height: 36px;
            border: none;
            background-color: #fbf4f0 !important;
            color: #655b56;
            &:nth-child(2) {
              margin-left: 34px;
              background: linear-gradient(135deg, #ff9743, #ff5e20) !important;
              color: #fff;
            }
          }
        }
      }
    }
  }
}
</style>
